<template>
	<div class="app-table">
		<div class="label" v-if="props.routerParams.operateType !== 'view'">回避机构</div>
		<div class="table">
			<el-button class="button" type="primary" @click="visible = true" icon="Plus" v-if="props.routerParams.operateType === 'add'"
				>添加回避机构</el-button
			>
			<el-button class="mb-5" v-if="props.routerParams.operateType === 'view'" type="primary" @click="changeOpen" icon="Refresh">更换机构</el-button>
			<el-table
				:cell-style="{ textAlign: 'center' }"
				:header-cell-style="{ textAlign: 'center', background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }"
				border
				:data="tableData"
				style="width: 100%"
				@selection-change="handleSelectionChange"
			>
				<el-table-column :selectable="selectable" v-if="props.routerParams.operateType === 'view'" type="selection" width="55" />
				<el-table-column type="index" width="55" label="序号" />
				<el-table-column v-for="column in expertColumns" :key="column.prop" :width="column.width" :prop="column.prop" :label="column.label" />
				<el-table-column label="操作" width="250" v-if="props.routerParams.operateType !== 'edit'">
					<template #default="{ row }">
						<el-button v-if="props.routerParams.operateType === 'add'" text type="danger" icon="Delete" @click="handleDelete(row)">删除</el-button>
						<el-button
							v-if="props.routerParams.operateType === 'view' && row.attend === '2'"
							text
							type="primary"
							icon="Pointer"
							@click="sureOpen(row, 'sure')"
							>参会确认</el-button
						>
						<el-button
							v-if="props.routerParams.operateType === 'view' && row.attend === '0' && row.extractStatus !== '1'"
							text
							type="primary"
							icon="View"
							@click="sureOpen(row, 'view')"
							>拒绝参会理由</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
	<ChooseInstitution :selectValues="tableData" @close="getData" :visible="visible" />
	<ChangeSelect :ids="ids" title="更换机构" @close="changeClose" :changeVisible="changeVisible" />
	<SureAttend :refuseReason="refuseReason" :sureType="sureType" :id="id" title="参会确认" @close="sureClose" :sureVisible="sureVisible" />
</template>

<script lang="ts" setup>
import ChooseInstitution from '../ChooseInstitution/index.vue';
import SureAttend from '../SureAttend/index.vue';
import ChangeSelect from '../ChangeSelect/index.vue';
import { ElMessage } from 'element-plus';
const expertColumns: any = computed(() => {
	if (props.routerParams.operateType !== 'view') {
		return [{ prop: 'institutionName', label: '机构名称' }];
	}
	return [
		{ prop: 'reviewUserName', label: '机构名称', width: 300 },
		{ prop: 'contacts', label: '机构联系人', width: 200 },
		{ prop: 'reviewUserPhone', label: '机构联系方式', width: 200 },
		{ prop: 'extractStatusName', label: '抽取状态', width: 200 },
		{ prop: 'replacementReasonName', label: '机构更换理由', width: 200 },
		{ prop: 'attendName', label: '是否参会', width: 200 },
	];
});
const props = defineProps({
	institutionAvoidanceData: {
		default: () => {
			return [];
		},
		type: Array,
	},
	routerParams: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
watch(
	() => props.institutionAvoidanceData,
	(val: any) => {
		tableData.value = val;
	}
);
const tableData = ref([]);
const visible = ref(false);
//获取数据
const getData = (data: any) => {
	if (data) {
		tableData.value = data;
	}
	visible.value = false;
};
//删除数据
const handleDelete = (row: any) => {
	tableData.value = tableData.value.filter((item: any) => item !== row);
};
//选中
const ids = ref<string[]>([]);
const handleSelectionChange = (val: any) => {
	ids.value = val.map((item: any) => item.id);
};
//打开更换弹窗
const changeVisible = ref(false);
const changeOpen = () => {
	if (ids.value && ids.value.length > 0) {
		changeVisible.value = false;
	} else {
		ElMessage.warning('请选择机构');
		return;
	}
	changeVisible.value = true;
};
//是否勾选
const selectable = (row: any) => {
	if (row.attend === '2') {
		return true;
	} else {
		return false;
	}
};
//确认参会
const id = ref();
const sureVisible = ref(false);
const sureType = ref('');
const refuseReason = ref('');
const sureOpen = (row: any, type: string) => {
	id.value = row.id;
	sureVisible.value = true;
	sureType.value = type;
	refuseReason.value = row.refuseReason;
};
//刷新
const emits = defineEmits(['handleRefresh']);
//关闭更换弹窗
const changeClose = (value: boolean) => {
	changeVisible.value = false;
	if (value) {
		emits('handleRefresh');
	}
};
//关闭参会确认
const sureClose = (value: boolean) => {
	sureVisible.value = false;
	if (value) {
		emits('handleRefresh');
	}
};

defineExpose({ tableData });
</script>
<style scoped lang="scss">
.app-table {
	width: 100%;
	display: flex;
	.label {
		width: 9%;
		text-align: right;
		padding-right: 10px;
	}
	.table {
		width: calc(100% - 9%);
		.button {
			margin-bottom: 20px;
		}
	}
}
</style>
